
<% var keyPrefix = angularAppName + '.'+ entityTranslationKey + '.'; %>
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                (click)="clear()">&times;</button>
        <h4 class="modal-title" id="my<%= entityClass %>Label" jhiTranslate="<%= keyPrefix %>home.createOrEditLabel">Create or edit a <%= entityClassHumanized %></h4>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="form-group" [hidden]="!<%=entityInstance %>.id">
            <label for="id" jhiTranslate="global.field.id">ID</label>
            <input type="text" class="form-control" id="id" name="id"
                   [(ngModel)]="<%=entityInstance %>.id" readonly />
        </div>
        <%_ for (idx in fields) {
        var fieldName = fields[idx].fieldName;
        var fieldNameCapitalized = fields[idx].fieldNameCapitalized;
        var fieldNameHumanized = fields[idx].fieldNameHumanized;
        var fieldType = fields[idx].fieldType;
        var fieldTypeBlobContent = fields[idx].fieldTypeBlobContent;
        var fieldInputType = 'text';
        var ngModelOption = '';
        var translationKey = keyPrefix + fieldName;
        if (fieldType == 'Integer' || fieldType == 'Long' || fieldType == 'Float' || fieldType == 'Double' || fieldType == 'BigDecimal') {
        fieldInputType = 'number';
        } else if (fieldType == 'LocalDate') {
        fieldInputType = 'date';
        } else if (fieldType == 'ZonedDateTime') {
        fieldInputType = 'datetime-local';
        } else if (fieldType == 'Boolean') {
        fieldInputType = 'checkbox';
        } else if ((fieldType == 'byte[]' || fieldType == 'ByteBuffer') && fieldTypeBlobContent != 'text') {
        fieldInputType = 'hidden';
        } _%>
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="<%= translationKey %>" for="field_<%= fieldName %>"><%= fieldNameHumanized %></label>
            <%_ if (fields[idx].fieldIsEnum) { _%>
            <select class="form-control" name="<%= fieldName %>" [(ngModel)]="<%= entityInstance %>.<%= fieldName %>" id="field_<%= fieldName %>" <% if (fields[idx].fieldValidate == true && fields[idx].fieldValidateRules.indexOf('required') != -1) { %> required<% } %>>
            <%_ var enumPrefix = angularAppName + '.'+ fieldType;
                var values = fields[idx].fieldValues.replace(/\s/g, '').split(',');
                for (key in values) {
                    var value = values[key]; _%>
                <option value="<%= value %>" jhiTranslate="<%=enumPrefix%>.<%=value%>"><%= value %></option>
                <%_ } _%>
            </select>
            <%_ } else { _%>
            <%_ if ((fieldType == 'byte[]' || fieldType === 'ByteBuffer') && fieldTypeBlobContent != 'text') { _%>
            <div>
                <%_ if (fieldTypeBlobContent == 'image') { _%>
                <img [src]="'data:' + <%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + <%=entityInstance %>.<%=fieldName%>" style="max-height: 100px;" *ngIf="<%= entityInstance %>.<%= fieldName %>" alt="<%=entityInstance %> image"/>
                <%_ } _%>
                <div *ngIf="<%= entityInstance %>.<%= fieldName %>" class="form-text text-danger clearfix">
                    <%_ if (fieldTypeBlobContent == 'any') { _%>
                    <a class="pull-left" (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" jhiTranslate="entity.action.open">open</a><br>
                    <span class="pull-left">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
                    <%_ } else { _%>
                    <span class="pull-left">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
                    <%_ } _%>
                    <button type="button" (click)="<%= entityInstance %>.<%= fieldName %>=null;<%= entityInstance %>.<%= fieldName %>ContentType=null;"
                            class="btn btn-default btn-xs pull-right">
                        <span class="fa fa-times"></span>
                    </button>
                </div>
                <input type="file" (change)="setFileData($event, <%= entityInstance %>, '<%= fieldName %>', <% if (fieldTypeBlobContent == 'image') { %>true)" accept="image/*" jhiTranslate="entity.action.addimage"<% } else { %>false)" jhiTranslate="entity.action.addblob"<% } %>/>
            </div>
            <%_ } _%>
            <%_ if (fieldType == 'LocalDate') { _%>
            <div class="input-group">
                <input id="field_<%= fieldName %>" type="text" class="form-control" name="<%= fieldName %>" ngbDatepicker  #<%= fieldName %>Dp="ngbDatepicker" [(ngModel)]="<%= entityInstance %>.<%= fieldName %>"
                <%- include ng_validators %>/>
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" (click)="<%= fieldName %>Dp.open()"><i class="fa fa-calendar"></i></button>
                </span>
            </div>
            <%_ } else if (fieldType == 'ZonedDateTime') { _%>
            <div class="input-group">
                <input id="field_<%= fieldName %>" type="datetime-local" class="form-control" name="<%= fieldName %>" [(ngModel)]="<%= entityInstance %>.<%= fieldName %>"
                <%- include ng_validators %>  />
            </div>
            <%_ } else if(fieldTypeBlobContent == 'text') { _%>
            <textarea class="form-control" name="<%= fieldName %>" id="field_<%= fieldName %>"
                [(ngModel)]="<%= entityInstance %>.<%= fieldName %>" <%- include ng_validators %> ></textarea>
            <%_ } else { _%>
            <input type="<%= fieldInputType %>" class="form-control" name="<%= fieldName %>" id="field_<%= fieldName %>"
                [(ngModel)]="<%= entityInstance %>.<%= fieldName %>"
            <%- include ng_validators %> />
                <%_ if ((fieldType == 'byte[]' || fieldType === 'ByteBuffer') && fieldTypeBlobContent != 'text') { _%>
            <input type="hidden" class="form-control" name="<%= fieldName %>ContentType" id="field_<%= fieldName %>ContentType"
                [(ngModel)]="<%= entityInstance %>.<%= fieldName %>ContentType" />
                <%_ } _%>
            <%_ } _%>
            <%_ } _%>
            <%_ if (fields[idx].fieldValidate == true) { _%>
            <div [hidden]="!(editForm.controls.<%= fieldName %>?.dirty && editForm.controls.<%= fieldName %>?.invalid)">
                <%_ if (fields[idx].fieldValidateRules.indexOf('required') != -1) { _%>
                <small class="form-text text-danger"
                   [hidden]="!editForm.controls.<%= fieldName %>?.errors?.required" jhiTranslate="entity.validation.required">
                   This field is required.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('minlength') != -1) { _%>
                <small class="form-text text-danger"
                   [hidden]="!editForm.controls.<%= fieldName %>?.errors?.minlength" jhiTranslate="entity.validation.minlength" translateValues="{ min: <%= fields[idx].fieldValidateRulesMinlength %> }">
                   This field is required to be at least <%= fields[idx].fieldValidateRulesMinlength %> characters.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('maxlength') != -1) { _%>
                <small class="form-text text-danger"
                   [hidden]="!editForm.controls.<%= fieldName %>?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: <%= fields[idx].fieldValidateRulesMaxlength %> }">
                   This field cannot be longer than <%= fields[idx].fieldValidateRulesMaxlength %> characters.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('min') != -1) { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.min" jhiTranslate="entity.validation.min" translateValues="{ min: <%= fields[idx].fieldValidateRulesMin %> }">
                    This field should be at least <%= fields[idx].fieldValidateRulesMin %>.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('max') != -1) { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.max" jhiTranslate="entity.validation.max" translateValues="{ max: <%= fields[idx].fieldValidateRulesMax %> }">
                    This field cannot be more than <%= fields[idx].fieldValidateRulesMax %>.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('minbytes') != -1) { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.minbytes" jhiTranslate="entity.validation.minbytes" translateValues="{ min: <%= fields[idx].fieldValidateRulesMinbytes %> }">
                    This field should be at least <%= fields[idx].fieldValidateRulesMinbytes %>.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('maxbytes') != -1) { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.maxbytes" jhiTranslate="entity.validation.maxbytes" translateValues="{ max: <%= fields[idx].fieldValidateRulesMaxbytes %> }">
                    This field cannot be more than <%= fields[idx].fieldValidateRulesMaxbytes %>.
                </small>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('pattern') != -1) { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.pattern" jhiTranslate="entity.validation.pattern" translateValues="{ pattern: '<%= fields[idx].fieldValidateRulesPattern.replace(/"/g, '&#34;').replace(/\\/g, '\\\\') %>' }">
                    This field should follow pattern "<%- fields[idx].fieldValidateRulesPattern.replace(/&/g, '&amp;').replace(/\{/g, '&#123;').replace(/\}/g, '&#125;') %>".
                </small>
                <%_ } _%>
                <%_ if (fieldType == 'Integer' || fieldType == 'Long' || fieldType == 'Float' || fieldType == 'Double' || fieldType == 'BigDecimal') { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.number" jhiTranslate="entity.validation.number">
                    This field should be a number.
                </small>
                <%_ } _%>
                <%_ if (fieldType == 'ZonedDateTime') { _%>
                <small class="form-text text-danger"
                    [hidden]="!editForm.controls.<%= fieldName %>?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal">
                    This field should be a date and time.
                </small>
                <%_ } _%>
            </div>
            <%_ } _%>
        </div>
        <%_ } _%>

        <%_ for (idx in relationships) {
        var relationshipType = relationships[idx].relationshipType;
        var ownerSide = relationships[idx].ownerSide;
        var otherEntityName = relationships[idx].otherEntityName;
        var otherEntityNamePlural = relationships[idx].otherEntityNamePlural;
        var otherEntityNameCapitalized = relationships[idx].otherEntityNameCapitalized;
        var relationshipName = relationships[idx].relationshipName;
        var relationshipNameHumanized = relationships[idx].relationshipNameHumanized;
        var relationshipFieldName = relationships[idx].relationshipFieldName;
        var relationshipFieldNamePlural = relationships[idx].relationshipFieldNamePlural;
        var otherEntityField = relationships[idx].otherEntityField;
        var otherEntityFieldCapitalized = relationships[idx].otherEntityFieldCapitalized;
        var relationshipRequired = relationships[idx].relationshipRequired;
        var translationKey = keyPrefix + relationshipName; _%>
        <%_ if (relationshipType == 'many-to-one' || (relationshipType == 'one-to-one' && ownerSide == true && otherEntityName == 'user')) { _%>
        <div class="form-group">
            <label jhiTranslate="<%= translationKey %>" for="field_<%= relationshipName %>"><%= relationshipNameHumanized %></label>
            <%_ if (dto == 'no') { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" [(ngModel)]="<%= entityInstance %>.<%=relationshipFieldName %>" <% if (relationshipRequired) { %> required<% } %>>
                <option [ngValue]="null"></option>
                <option [ngValue]="<%=otherEntityName %>Option.id === <%= entityInstance %>.<%=relationshipFieldName %>?.id ? <%= entityInstance %>.<%=relationshipFieldName %> : <%=otherEntityName %>Option" *ngFor="let <%=otherEntityName %>Option of <%=otherEntityNamePlural.toLowerCase() %>; trackBy: track<%=otherEntityNameCapitalized %>ById">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
            </select>
            <%_ } else { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" [(ngModel)]="<%= entityInstance %>.<%=relationshipFieldName %>Id" <% if (relationshipRequired) { %> required<% } %>>
                <option [ngValue]="null"></option>
                <option [ngValue]="<%=otherEntityName %>Option.id" *ngFor="let <%=otherEntityName %>Option of <%=otherEntityNamePlural.toLowerCase() %>; trackBy: track<%=otherEntityNameCapitalized %>ById">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
            </select>
            <%_ } _%>
        </div>
        <%_ } else if (relationshipType == 'one-to-one' && ownerSide == true) { _%>
        <div class="form-group">
            <label jhiTranslate="<%= translationKey %>" for="field_<%= relationshipName %>"><%= relationshipNameHumanized %></label>
            <%_ if (dto == 'no') { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" [(ngModel)]="<%= entityInstance %>.<%=relationshipFieldName %>"<% if (relationshipRequired) { %> required<% } %>>
                <option [ngValue]="null"></option>
                <option [ngValue]="<%=otherEntityName %>Option.id === <%= entityInstance %>.<%=relationshipFieldName %>?.id ? <%= entityInstance %>.<%=relationshipFieldName %> : <%=otherEntityName %>Option" *ngFor="let <%=otherEntityName %>Option of <%=relationshipFieldNamePlural.toLowerCase() %>; trackBy: track<%=otherEntityNameCapitalized %>ById">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
            </select>
            <%_ } else { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" [(ngModel)]="<%= entityInstance %>.<%=relationshipFieldName %>Id"<% if (relationshipRequired) { %> required<% } %>>
                <option [ngValue]="null"></option>
                <option [ngValue]="<%=otherEntityName %>Option.id" *ngFor="let <%=otherEntityName %>Option of <%=relationshipFieldNamePlural.toLowerCase() %>; trackBy: track<%=otherEntityNameCapitalized %>ById">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
            </select>
            <%_ } _%>
        </div>
        <%_ } else if (relationshipType == 'many-to-many' && relationships[idx].ownerSide == true) { _%>
        <div class="form-group">
            <label jhiTranslate="<%= translationKey %>" for="field_<%= relationshipName %>"><%= relationshipNameHumanized %></label>
            <select class="form-control" id="field_<%= relationshipName %>" #<%= relationshipName %>="ngModel" multiple name="<%= relationshipName %>" [(ngModel)]="<%=entityInstance %>.<%=relationshipFieldNamePlural %>"<% if (relationshipRequired) { %> required<% } %>>
                <option [ngValue]="getSelected(<%=entityInstance %>.<%=relationshipFieldNamePlural %>, <%=otherEntityName %>Option)" *ngFor="let <%=otherEntityName %>Option of <%=otherEntityNamePlural.toLowerCase() %>; trackBy: track<%=otherEntityNameCapitalized %>ById">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
            </select>
        </div>
        <%_ } _%>
        <%_ if (relationships[idx].relationshipValidate == true) { _%>
        <div [hidden]="!(editForm.controls.<%= relationshipName %>?.dirty && editForm.controls.<%= relationshipName %>?.invalid)">
            <%_ if (relationshipRequired) { _%>
            <small class="form-text text-danger"
                [hidden]="!<%= relationshipName %>?.errors?.required" jhiTranslate="entity.validation.required">
                This field is required.
            </small>
            <%_ } _%>
        </div>
        <%_ } _%>
    <%_ } _%>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="clear()">
            <span class="fa fa-ban"></span>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
        </button>
        <button type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
            <span class="fa fa-save"></span>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
        </button>
    </div>
</form>
